<template>
  <div class="articlesinfo">
    <van-nav-bar fixed class="navbar">
      <template #left>
        <van-icon name="arrow-left" class="lefticon" @click="back" />
      </template>
      <template #title> 文章详情 </template>
    </van-nav-bar>
    <div v-show="isis == true">
      <div class="titles">
        <h4 class="title">{{ item.title }}</h4>
      </div>
      <van-cell title="" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <van-image
            width="1.5rem"
            height="1.5rem"
            fit="cover"
            :src="item.aut_photo"
            round
          />
          <span class="aut_name">{{ item.aut_name }}</span>
          <div class="pubdate">{{ item.pubdate }}</div>
        </template>
        <template #right-icon>
          <van-tag
            class="tag"
            type="primary"
            :class="{ is: item.is_followed == false }"
            @click="isFollow"
            >{{ isfollow }}</van-tag
          >
        </template>
      </van-cell>
      <van-cell class="htm_content">
        <template #default>
          <div v-html="item.content"></div>
        </template>
      </van-cell>
      <p class="end">End</p>
      <van-cell>
        <template #default>
          <van-tag
            class="tag1"
            type="danger"
            :class="{ isLove: item.attitude == -1 }"
            @click="isAttitude"
          >
            <van-icon name="good-job" v-if="item.attitude == 1" />
            <van-icon name="good-job-o" v-else />&nbsp;
            {{ isLoves }}
          </van-tag>
        </template>
      </van-cell>
      <articlescomment></articlescomment>
    </div>
    <!-- 页面未加载完成之前的loading提示图 -->
    <div class="loadingbox">
      <van-loading
        size="24px"
        type="spinner"
        color="#1989fa"
        v-show="isis == false"
      >
        文章加载中...</van-loading
      >
    </div>
  </div>
</template>

<script>
import { getArticlesInfo, setUserFollow, deleteUserFollow, setLoveUser, deleteLoveUser } from '../../api/articles'
import articlescomment from '@/views/articlesinfo/articlescomment'
export default {
  // 组件名称
  name: 'articlesinfo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { articlescomment },
  // 组件状态值
  data () {
    return {
      id: null,
      item: {},
      isis: false,
    }
  },
  // 获取文章详情内容
  async created () {
    this.id = this.$route.params.id
    const res = await getArticlesInfo(this.id)
    this.item = res.data.data
    // 数据加载完成之后隐藏loading提示图,显示文章内容
    this.isis = true
  },
  methods: {
    back () {
      this.$router.back()
    },
    // 是否关注作者
    async isFollow () {
      this.item.is_followed = !this.item.is_followed
      if (this.item.is_followed) {
        await setUserFollow(this.item.aut_id)
      } else {
        await deleteUserFollow(this.item.aut_id)
      }
    },
    // 是否点赞了文章
    async isAttitude () {
      this.item.attitude = -(this.item.attitude)
      if (this.item.attitude == 1) {
        await setLoveUser(this.item.art_id)
      } else if (this.item.attitude == -1) {
        await deleteLoveUser(this.item.art_id)
      }
    }
  },
  computed: {
    isfollow () {
      return this.item.is_followed ? '已关注' : ' + 关注'
    },
    isLoves () {
      return this.item.attitude == -1 ? '点赞' : '已点赞'
    }
  }
}
</script>
<style scoped lang="less">
.loadingbox {
  margin-top: 10px;
  text-align: center;
}
.articlesinfo {
  padding-top: 46px;
}
.lefticon {
  font-size: 22px;
  position: relative;
  left: -4px;
}
.navbar {
  z-index: 99999999;
}
.title {
  padding: 16px 10px 4px;
  font-size: 16px;
}
h4 {
  margin: 0;
  padding: 0;
}
.aut_name {
  margin-left: 8px;
}
.pubdate {
  position: absolute;
  top: 40px;
  left: 80px;
  font-size: 12px;
}
.tag {
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  display: block;
  text-align: center;
}
.is {
  background-color: #fff;
  border: 1px solid blue;
  color: blue;
}
.htm_content {
  padding: 0 6px;
  font-size: 13px;
}
/deep/ img {
  width: 100%;
}
/deep/ pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.end {
  font-size: 15px;
  text-align: center;
  color: gray;
}
.tag1 {
  position: relative;
  left: 50%;
  bottom: 0;
  height: 30px;
  line-height: 30px;
  text-align: right;
  padding: 0 8px;
  transform: translateX(-50%);
  z-index: 9999;
  border: 1px solid red;
  border-radius: 3px;
}

.isLove {
  background-color: #fff;
  border: 1px solid red;
  color: red;
  border-radius: 3px;
}
</style>

  // if (this.$route.params.id.includes('l-')) {
  //       this.$router.push('/searchresults/' + this.$route.params.id)
  //     } else {
  //       this.$router.push('/layout/home')
  //     }
